<!-- eslint-disable no-console -->
<script lang="ts" setup>
import type { CalplanApi, DictApi } from '#/api';

import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { cloneDeep } from '@vben/utils';

import dayjs from 'dayjs';

import { useVbenForm } from '#/adapter/form';
import { addShift, DictResp, updateShift } from '#/api';
import { getUnitmeasureAll } from '#/api/mes/md/unitmeasure';

const emit = defineEmits(['success']);
// 将字典数据添加到数组中;
const mes_index_type = reactive<DictApi.SelectOption[]>([]);
DictResp(['mes_index_type']).then((res) => {
  // 将两个数组合并
  if (res.mes_index_type) {
    mes_index_type.push(...res.mes_index_type);
  }
});

const measureAll = reactive<DictApi.SelectOption[]>([]);
getUnitmeasureAll().then((res) => {
  res.data.forEach((item) => {
    measureAll.push({
      label: item.measureName,
      value: item.measureCode,
    });
  });
});

const formdata = ref<CalplanApi.Row1>();
const [Modal, modalApi] = useVbenModal({
  closeOnClickModal: false,
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = cloneDeep(modalApi.getData());
      console.log(data);
      if (data.planId) {
        baseFormApi.setFieldValue('planId', modalApi.getData().planId);
      }
      if (data.row) {
        data.row.startTime = dayjs(data.row.startTime, 'HH:mm') as any;
        data.row.endTime = dayjs(data.row.endTime, 'HH:mm') as any;
        formdata.value = data.row as CalplanApi.Row1;
        baseFormApi.setValues(formdata.value as any);
      }
    }
  },
  async onConfirm() {
    const { valid } = await baseFormApi.validate();
    if (valid) {
      modalApi.lock();
      let data: CalplanApi.Row1;
      await baseFormApi.getValues().then((res) => {
        console.log(res);
        data = res as CalplanApi.Row1;
        data.startTime = dayjs(res.startTime, 'HH:mm').format('HH:mm') as any;
        data.endTime = dayjs(res.endTime, 'HH:mm').format('HH:mm') as any;
      });
      try {
        await (formdata.value?.shiftId ? updateShift(data!) : addShift(data!));
        emit('success', formdata.value?.shiftId ? '修改成功' : '新增成功');
        modalApi.close();
      } finally {
        modalApi.lock(false);
      }
    }
  },
});

// const switchValue = ref('');
const [BaseForm, baseFormApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  showDefaultActions: false,
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      rules: 'required',
      dependencies: {
        show: false,
        triggerFields: ['shiftId'],
      },
      fieldName: 'planId',
      label: 'planId',
    },
    {
      component: 'Input',
      rules: 'required',
      dependencies: {
        show: false,
        triggerFields: ['shiftId'],
      },
      fieldName: 'shiftId',
      label: 'shiftId',
    },
    {
      component: 'ElInputNumber',
      componentProps: {
        min: 1,
      },
      rules: 'required',
      fieldName: 'orderNum',
      defaultValue: 1,
      formItemClass: 'col-span-4',
      label: '序号',
    },
    {
      component: 'Input',
      rules: 'required',
      componentProps: {
        placeholder: '请输入班次名称',
      },
      fieldName: 'shiftName',
      label: '班次名称',
      formItemClass: 'col-span-4',
    },
    {
      component: 'TimePicker',
      fieldName: 'startTime',
      componentProps: {
        format: 'HH:mm',
      },
      label: '开始时间',
      formItemClass: 'col-span-4',
    },
    {
      component: 'TimePicker',
      componentProps: {
        format: 'HH:mm',
      },
      fieldName: 'endTime',
      label: '结束时间',
      formItemClass: 'col-span-4',
    },
  ],
  wrapperClass: 'grid grid-cols-8',
});

function onSubmit(values: Record<string, any>) {
  console.log(values);
  modalApi.close();
}
</script>
<template>
  <Modal class="w-1/2">
    <BaseForm />
  </Modal>
</template>
